
<script lang="ts">
import {  ref, onMounted } from 'vue';
import TopProgress from '../components/TopProgress.vue';

export default {
  components:{
    TopProgress
  },
  setup() {
    const progress = ref<number>(0);

    const updateProgress = () => {
      const resources = document.querySelectorAll('img, script, link, iframe');
      let loadedResources = 0;

      resources.forEach((resource) => {
        if ((resource as HTMLImageElement).complete) {
          loadedResources++;
        } else {
          resource.addEventListener('load', () => {
            loadedResources++;
            progress.value = (loadedResources / resources.length) * 100;
          });
          resource.addEventListener('error', () => {
            loadedResources++;
            progress.value = (loadedResources / resources.length) * 100;
          });
        }
      });

      if (resources.length === 0) {
        progress.value = 100; // 如果没有资源，直接显示 100%
      }
    };

    onMounted(() => {
      updateProgress();
    });

    return {
      progress,
    };
  },
};
</script>
<template>
  <TopProgress></TopProgress>
    <div>
      <div id="progress-bar" :style="{ width: progress + '%' }"></div>
      <p>加载进度：{{ progress }}%</p>
    </div>
  </template>
  
  
  <style>
  #progress-bar {
    height: 5px;
    background: blue;
    transition: width 0.3s ease;
  }
  </style>